<template>
    <div ref="pieChart" class="pie-chart"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    props: {
      chartData: {
        type: Array,
        required: true,
      },
    },
    mounted() {
      this.initChart();
      window.addEventListener('resize', this.resizeChart);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.resizeChart);
    },
    methods: {
      initChart() {
        const chartDom = this.$refs.pieChart;
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '类型统计',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            left: 'center',       // 水平居中
            bottom: '0%',         // 放在底部
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.chartData
            }
          ]
        };
        myChart.setOption(option);
      },
      resizeChart() {
        const chartDom = this.$refs.pieChart;
        if (chartDom) {
          echarts.getInstanceByDom(chartDom).resize();
        }
      },
    },
  };
</script>

<style scoped>
    .pie-chart {
        width: 100%;
        height: 400px; /* 根据需要调整高度 */
    }
</style>
